<template>
  <div>
    <div class="header">
      <van-nav-bar title="统计图表" left-arrow @click-left="$router.back()" />
    </div>
    <div v-if="this.date.length == 0" style="text-align: center">请先记录支出后查看图表</div>
    <div v-else>
<!--      支出折线图-->
      <div style="width: auto;height: 400px" id="main" >
      </div>
<!--      本月支出类别比例-->
      <div style="width: auto;height: 400px" id="main1" >
      </div>
    </div>
  </div>

</template>

<script>
//通过this.$echarts来使用
// import echarts from 'echarts'

export default {
  name: "chart",
  data() {
    return {
      date: [],
      amount: [],
      type:[]
    }
  },
  created() {
    this.getData()
  },
  mounted(){
    this.echartsInit()
    this.echartsInit1()
	},
  methods:{
    echartsInit() {
      let myChart = this.$echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '每日开支折线图',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: this.date
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.amount,
          type: 'line'
        }]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    echartsInit1() {
      let myChart = this.$echarts.init(document.getElementById('main1'));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '本月支出类别比例',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '支出类别',
            type: 'pie',
            radius: '50%',
            data: this.type,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    getData() {
      // 将时间和对应的支出取出来
      this.$store.state.payList.forEach((item) =>{
        this.date.unshift(item.date)
        this.amount.unshift(item.amount)
      })
      // 将本月支出类型和对应金额取出来
      this.$store.state.TagPayList.forEach((item) =>{
        this.type.push({
          value: item[1],
          name: item[0]
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
